<template>
  <Drawer
    width="33%"
    title="创建工单"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="onclose"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>

    <Form :model="formState" v-bind="formItemLayout" ref="formRef">
      <FormItem label="工单名称" name="name">
        <Input v-model:value="formState.name" placeholder="请输入" />
      </FormItem>
      <FormItem label="应用" name="appId" :rule="[{ required: true, message: '请选择应用' }]">
        <Select v-model:value="formState.appId" :options="appList" @change="appChange" placeholder="请选择"></Select>
      </FormItem>
      <FormItem v-if="formState.appId" label="组件" name="componentId">
        <Select v-model:value="formState.componentId" :options="compoList" placeholder="请选择"></Select
      ></FormItem>
      <FormItem label="问题描述" name="description">
        <Textarea v-model:value="formState.description" placeholder="请输入"></Textarea
      ></FormItem>
      <FormItem label="上传附件" name="attachmentList">
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :multiple="true"
          :file-list="fileList"
          @change="handleChange"
        >
          <Button>
            <UploadOutlined></UploadOutlined>
            Upload
          </Button>
        </Upload>
      </FormItem>
      <FormItem label="事件等级" name="level">
        <Select v-model:value="formState.level" :options="levelList" placeholder="请选择"></Select>
      </FormItem>
      <FormItem name="isNotified">
        <Checkbox v-model:checked="formState.isNotified">接收消息通知</Checkbox>
      </FormItem>
      <template v-if="formState.isNotified == true">
        <FormItem label="手机号" name="phone">
          <Input v-model:value="formState.phone" placeholder="请输入" />
        </FormItem>
        <FormItem label="邮箱" name="email">
          <Input v-model:value="formState.email" placeholder="请输入" />
        </FormItem>
        <FormItem label="接收消息时间" name="availableTime">
          <TimeRangePicker v-model:value="timeRange" format="HH:mm" :placeholder="['最早时间', '最晚时间']" />
        </FormItem>
      </template>
    </Form>
    <template #footer>
      <Button style="margin-right: 8px" type="primary" @click="submit">提交</Button>
      <Button @click="onclose">取消</Button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import {
  Drawer,
  Form,
  FormItem,
  Input,
  Textarea,
  message,
  Button,
  Select,
  Checkbox,
  TimeRangePicker,
} from 'ant-design-vue';
import { ref } from 'vue';
import { ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons-vue';

import { CreateParam } from '/@/api/work-order/workOrderManagement/eventManagementTenant/model/eventMgtTenantModel';
import { createShift, getCompoList } from '/@/api/work-order/workOrderManagement/eventManagementTenant/eventMgtTenant';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
const visible = ref(false);
let formState = ref({} as CreateParam);
const formRef = ref();
const timeRange = ref(null);
const appList = ref();
const compoList = ref();

// appList.value = await getAppList();
const getOptions = async () => {
  appList.value = [{ label: 'aa', value: 'aa' }];
  if (formState.value.appId) {
    compoList.value = await getCompoList({ appId: formState.value.appId });
  }
};
getOptions();

const openCreate = async () => {
  visible.value = true;
};

const fileList = ref<UploadProps['fileList']>([
  {
    uid: '-1',
    name: 'xxx.png',
    status: 'done',
    url: 'http://www.baidu.com/xxx.png',
  },
]);
const handleChange = (info: UploadChangeParam) => {
  let resFileList = [...info.fileList];

  // 1. Limit the number of uploaded files
  //    Only to show two recent uploaded files, and old ones will be replaced by the new
  resFileList = resFileList.slice(-2);

  // 2. read from response and show file link
  resFileList = resFileList.map((file) => {
    if (file.response) {
      file.url = file.response.url;
    }
    return file;
  });

  fileList.value = resFileList;
};
const emit = defineEmits(['submitSuccess']);
const submit = async () => {
  let createParam = {};

  formRef.value.validate().then(async () => {
    if (!(formState.value.isNotified == true && (formState.value.phone || formState.value.email))) {
      message.warning('请至少填写一种联系方式');
      return;
    }
    let res = await createShift(createParam);
    if (res) {
      message.success('创建成功');
    }
    emit('submitSuccess');
  });
};
const onclose = () => {
  visible.value = false;
  formRef.value.clearValidate();
  formState.value = {} as CreateParam;
};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openCreate });
</script>
